<template>
	<view class="travelApply-bill">
		<view class="top">
			<text class="title">单据模版</text>
			<view class="template-box">
				<view class="left">
					<icon-svg icon-class="youxiang" class="icon-youxiang" style="color: #FFA07A;" />
					<text style="color:#595959;">差旅费报销单</text>
				</view>
				<view class="right">
					<navigator url="./billsTemplate">
						<text class="changModel">切换模版</text>
					</navigator>
				</view>
			</view>
		</view>
		<view class="billDetail-main">
			<view class="billDetail-main-item" v-for="item in billDetailItemList" :key="item.header">
				<view class="main-item-header" v-if="item.header">
					{{item.header}}:
				</view>
				<view class="main-item-body">
					<span @click="clickLeftIcon">
						<icon-svg v-if="item.left_icon" :icon-class="item.left_icon" class="body-icon" /></span>

					<input class="uni-input" v-model="item.body" :name="item.header" v-if="item.header" />
					<text v-if="!item.header">{{item.body}}</text>
					<icon-svg v-if="item.right_icon" :icon-class="item.right_icon" class="fr" />
				</view>
			</view>
		</view>
		<view class="op">
			<view class="remark">
				<view class="remakrk-header" style="height: 100rpx;line-height: 100rpx;">
					<text style="margin-left: 20rpx;">费用明细·明细列表</text>
					<icon-svg icon-class="icon-test6" />
				</view>
				<view class="remark-body billDetail-list-costList">
					<view class="costItem" v-for="item in costData" :key="item.type">
						<view class="costItem-left">
							<icon-svg :icon-class="item.icon"></icon-svg>
						</view>
						<view class="costItem-right">
							<view class="costItem-line1" v-if="item.type">
								<text>{{item.type}}</text>
								<text class="fr" style="color:#333">CNY {{item.money}}</text>
							</view>
							<view class="costItem-line3" v-if="item.time">
								<text>{{item.time}}</text>
							</view>
						</view>
					</view>
				</view>
			</view>
			<view class="op-box">
				<span>
					<navigator url="./selectCostType">添加明细</navigator>
				</span>
				<span style="border-left: 1px solid #ccc;">导出明细</span>
			</view>
		</view>
		<view class="costShare">
			<text>费用分摊</text> <text class="addDeatil">添加明细</text>
		</view>
		<view class="relateApply">
			<view class="relateApply-header">
				关联申请:
			</view>
			<view class="relateApply-body" v-for="item in relateApply" :key="item.name">
				<view class="center">
					<view class="center-line1">
						<text>{{item.name}}</text><text style="float: right;font-weight: 600;">￥{{item.money}}</text>
					</view>
					<view class="center-line2">
						<text style="font-size: 30rpx;color: #333;">{{item.id}}</text><text style="float: right;color: #333;font-size:30rpx;">申请金额</text>
					</view>
				</view>
			</view>
			<view class="relateApply-btn">
				<navigator url="./realteApply"><button type="default">点击选择</button></navigator>
			</view>
		</view>

		<view class="loan">
			<view class="loan-header">
				核销借款
			</view>
			<view class="addLoan" v-for="item in addLoan" :key="item.id ">
				<view class="addLoan-line1">
					<text>{{item.id}}</text><text style="float: right;font-size: 600;">CNY {{item.money}}</text>
				</view>
				<view class="addLoan-line2">
					<text style="float: right;color: #999;font-size: 30rpx;">核销借款金额</text>
				</view>
			</view>
			<view class="loan-btn">
				<navigator url="./addLoan">添加核销借款</navigator>
			</view>
			
		</view>
		<view class="footer">
			<button>存为草稿</button>
			<button class="send" @click="save">提交送审</button>
		</view>
	</view>
</template>

<script>
	let date = new Date()
	let dateString = `${date.getFullYear()}-${date.getMonth()+1}-${date.getDate()}`
	export default {
		data() {
			return {
				costData: [],
				formList: [{
						'title': '申请事项',
						'placeholder': '请输入标题',
						'name': 'input',
						'value': ''
					},
					{
						'title': '申请人',
						'placeholder': '请输入名称',
						'name': 'input',
						'value': '陈赫斯'
					},
					{
						'title': '申请日期',
						'placeholder': '请输入日期',
						'name': 'input',
						'value': '2020-12-27'
					},
					{
						'title': '申请单位',
						'placeholder': '请选择费用承担单位',
						'name': 'input',
						'value': ''
					},
					{
						'title': '申请部门',
						'placeholder': '',
						'name': 'input',
						'value': '演示环境V2.0'
					},
					{
						'title': '申请金额',
						'placeholder': '请输入借款金额',
						'name': 'input',
						'value': ''
					},
				],

				billDetailItemList: [{
						header: '报销人',
						body: '陈赫斯',
					},
					{
						header: '报销单位',
						body: '时代邻里股份有限公司',
					},
					{
						header: '报销部门',
						body: '公共部门',
					},
					{
						header: '报销金额',
						body: '',
					},
					{
						header: '报销日期',
						body: dateString,
					},
					{
						header: '',
						body: '分摊',
						left_icon: 'fangkuang',
					},
					{
						header: '收款人',
						body: '陈赫斯',
					},
					{
						header: '收款信息',
						body: '邮政银行  4654  (广州...)',
						left_icon: 'youzhengyinhang',
						right_icon: 'icon-test6'
					},
					{
						header: '预算承担单位',
						body: '时代邻里股份有限公司',
					},
					{
						header: '预算承担部门',
						body: '公共部门',
					},
					{
						header: '预算承担项目',
						body: '佛山项目',
					}
				],
				relateApply: [],
				addLoan: []
			};
		},
		methods: {
			clickLeftIcon() {
				this.billDetailItemList[5].left_icon === 'fangkuang' ?
					this.$set(this.billDetailItemList, 5, {
						header: '',
						body: '分摊',
						left_icon: 'xuanzhong',
					}) :
					this.$set(this.billDetailItemList, 5, {
						header: '',
						body: '分摊',
						left_icon: 'fangkuang',
					})
			},
			save() {
				uni.showModal({
					showCancel: false,
					confirmText: '知道了',
					confirmColor: '#32b6c5',
					content: '提交成功，请耐心等待审批',
					success() {
						uni.reLaunch({
							url: '/pages/index/index'
						})
					}
				})
			}
		},
		onLoad() {
			uni.$on('relateApply', data => {
				this.relateApply = data
				console.log('ready')
			})
			uni.$on('addLoan', data => {
				this.addLoan = data
			})
			uni.$on('saveTicket', data => {
				console.log(data)
				this.costData = data
				this.billDetailItemList.map(item => {
					if(item.header === "报销金额") {
						item.body = data[0].money
					}
				})
			})
		},
		onUnload() {
			uni.$off('relateApply')
			uni.$off('addLoan')
			uni.$off('saveTicket')
		},
	}
</script>

<style lang="scss" scoped>
	page {
		padding-bottom: 200rpx;
	}

	.travelApply-bill {
		position: relative;

		.top {
			background-color: #fff;

			.title {
				margin: 20rpx 0 0 20rpx;
				color: #ccc;
				display: inline-block;
			}

			.template-box {
				padding: 10rpx 20rpx;
				display: flex;
				justify-content: space-between;
				line-height: 60rpx;
				height: 60rpx;

				.left {
					.svg-icon {
						color: #32B6C5;
						font-size: 1em;
					}

					text {
						margin-left: 14rpx;
					}
				}
			}
		}

		.op {
			background-color: #fff;
			margin-top: 20rpx;

			.remark {
				.remark-header {
					line-height: 100rpx;
					height: 100rpx;
				}

			}

			.op-box {
				line-height: 100rpx;
				height: 100rpx;
				border-top: 1px solid #ccc;

				span {
					width: 49%;
					text-align: center;
					display: inline-block;
					color: $themeColor;
				}
			}
		}

		.footer {
			position: fixed;
			bottom: 0;
			left: 0;
			right: 0;
			display: flex;
			background-color: #fff;
			padding: 20rpx;

			button {
				width: 100%;
			}
		}

		.billDetail-main {
			padding: 30rpx;
			background-color: white;
			margin-top: 30rpx;

			.billDetail-main-item {
				border-bottom: 1rpx solid $underline;
				margin-bottom: 20rpx;

				.main-item-header {
					color: $uni-text-color-grey;
					margin-bottom: 20rpx;

					&:before {
						content: '* ';
						color: red;
					}
				}

				.main-item-body {
					margin-bottom: 50rpx;
					margin-left: 25rpx;
				}
			}
		}

		.costShare {
			padding: 10rpx 40rpx;
			height: 60rpx;
			line-height: 60rpx;
			background-color: white;
			margin-top: 30rpx;
			border-bottom: 1rpx solid $underline;
		}

		.relateApply {
			padding: 40rpx;
			background-color: white;
			border-bottom: 1rpx solid $underline;

			.relateApply-header {
				height: 60rpx;
				line-height: 60rpx;
				margin-bottom: 30rpx;
			}

			.relateApply-btn {
				color: $themeColor;
			}

		}

		uni-button[type=default] {
			color: $themeColor;
			background-color: white;
			border: 1rpx solid $themeColor;
		}

		.loan {
			padding: 40rpx;
			background-color: white;
			margin-bottom: 30rpx;

			.loan-header {
				height: 60rpx;
				line-height: 60rpx;
				font-size: 40rpx;
			}

			.loan-btn {
				height: 60rpx;
				line-height: 60rpx;
				text-align: center;
				color: $themeColor;
			}

		}

		.pay {
			padding: 40rpx;
			background-color: white;

			.pay-line1 {
				height: 60rpx;
				line-height: 60rpx;
			}

			.pay-line2 {
				height: 60rpx;
				line-height: 60rpx;
				color: $uni-text-color-grey;
			}
		}

		.center {
			flex: 1;
			border-bottom: 1rpx solid $underline;
			margin-bottom: 20rpx;
		}

		.center-line1 {
			height: 50rpx;
			line-height: 50rpx;
		}

		.center-line2 {
			height: 50rpx;
			line-height: 50rpx;
		}

		.billDetail-list-costList {
			.costItem {
				padding-top: 30rpx;
				height: 120rpx;
				display: flex;
				border-bottom: 1rpx solid $underline;

				.costItem-left {
					width: 100rpx;
					text-align: center;
					font-size: 80rpx;
					margin-right: 30rpx;
				}

				.costItem-right {
					flex: 1;
					margin-right: 50rpx;

					.costItem-line1 {
						font-size: 35rpx;
						font-weight: 600;

					}

					.costItem-line2 {
						font-size: 30rpx;
						color: $uni-text-color-grey;
						height: 40rpx;
					}

					.costItem-line3 {
						font-size: 30rpx;
						color: $uni-text-color-grey;
						height: 40rpx;
					}

					.costItem-line4 {
						font-size: 30rpx;
						color: $uni-text-color-grey;
						height: 40rpx;
					}

					.costItem-line5 {
						font-size: 30rpx;
						color: black;
						height: 40rpx;
					}
				}
			}
		}

		.changModel {
			color: $themeColor;
			font-size: 30rpx;
		}

		.addDeatil {
			color: $themeColor;
			float: right;
		}

		.send {
			color: white;
			background-color: $themeColor;
		}


		.fr {
			float: right;
		}
		.addLoan{
			padding: 20rpx;
			border-bottom: 1rpx solid $underline;
			.addLoan-line1{
				height: 50rpx;
				line-height: 50rpx;
			}
			.addLoan-line2{
				height: 50rpx;
				line-height: 50rpx;
			}
		}
	}
</style>
